All files / src/pages/[year]/[month] index.astro

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
---
import { getCollection } from 'astro:content';
import Layout from '../../../layouts/Layout.astro';
import Sidebar from '../../../components/Sidebar/index.tsx';
import config from '../../../config/index.json';
 
export async function getStaticPaths() {
  const allPosts = await getCollection('blog');
  const sorted = allPosts.sort(
    (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
  );
 
  const yearMonths = new Set<string>();
  allPosts.forEach((post) => {
    const d = new Date(post.data.date);
    const year = d.getFullYear().toString();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    yearMonths.add(`${year}/${month}`);
  });
 
  return Array.from(yearMonths).map((ym) => {
    const [year, month] = ym.split('/');
    return {
      params: { year, month },
      props: {
        year,
        month,
        posts: sorted.filter((p) => {
          const d = new Date(p.data.date);
          const y = d.getFullYear().toString();
          const m = String(d.getMonth() + 1).padStart(2, '0');
          return y === year && m === month;
        }),
        allPosts: sorted,
      },
    };
  });
}
 
const { year, month, posts, allPosts } = Astro.props;
 
const title = `${year}年${month}月の記事 (${posts.length}件)`;
 
const latestPosts = allPosts.slice(0, 6).map((p) => ({
  title: p.data.title,
  slug: p.slug,
  date: p.data.date.toISOString(),
}));
 
const allPostsForSidebar = allPosts.map((p) => ({
  date: p.data.date.toISOString(),
  tags: p.data.tags || [],
}));
---
 
<Layout
  title={title}
  description={title}
  canonicalUrl={`${config.siteUrl}/${year}/${month}/`}
  noindex={true}
>
  <div class="container">
    <div class="row">
      <Sidebar
        client:load
        latestPosts={latestPosts}
        allPosts={allPostsForSidebar}
        totalCount={allPosts.length}
      />
      <div class="col order-2" style="padding:2rem;">
        <h2>{title}</h2>
        <ul>
          {posts.map((post) => {
            const url = post.slug;
            const dateStr = new Date(post.data.date).toISOString().split('T')[0];
            return (
              <li>
                {dateStr}&nbsp;&nbsp;
                <a href={`/${url}/`}>{post.data.title}</a>
              </li>
            );
          })}
        </ul>
      </div>
      <div class="col-xl-2 col-lg-1 order-3"></div>
    </div>
  </div>
</Layout>